import { Component } from 'react'
import axios from 'axios'
import './Demo.less'
import { Checkbox, Pagination, ConfigProvider, Carousel } from 'antd'
import zh_CN from 'antd/es/locale/zh_CN'
import {
  SearchOutlined,
  DownOutlined,
  LeftCircleOutlined,
  RightCircleOutlined,
  UpOutlined
} from '@ant-design/icons'

export default class Demo extends Component {
  state = {
    contentStyle: {
      height: '500px',
      color: '#fff',
      lineHeight: '500px'
      // textAlign: "center",
    },
    tabKey: 1,
    tabs: [
      { title: '普通讲师', key: 1 },
      { title: '高级讲师', key: 2 },
      { title: '特聘讲师', key: 3 },
      { title: '超级讲师', key: 4 }
    ],
    LabelKey: [1],
    Label: [
      { name: '擅长方向', key: 1, checked: false },
      { name: '新手', key: 2, checked: false },
      { name: '店长', key: 3, checked: false },
      { name: '内容运营', key: 4, checked: false },
      { name: '搜索', key: 5, checked: false },
      { name: '服装服饰', key: 6, checked: false },
      { name: '进阶', key: 7, checked: false },
      { name: '汽车五金电子', key: 8, checked: false },
      { name: '基础', key: 9, checked: false },
      { name: '商品运营', key: 10, checked: false },
      { name: '箱包鞋帽', key: 11, checked: false },
      { name: '淘宝客', key: 12, checked: false },
      { name: '店铺运营', key: 13, checked: false },
      { name: '运营', key: 14, checked: false },
      { name: '店铺', key: 15, checked: false }
    ],
    isOn: false,
    search: '', // input的值
    pageNo: 1,
    images: [],
    data: [], //  请求参数
    tags: [],
    baseUrl:
      'https://www.fastmock.site/mock/fe1e37e0a331bc6177530e288327c374/api/api/testInterface?'
  }

  componentDidMount () {
    const { search, tabKey, Label, baseUrl, pageNo } = this.state
    let arr = []
    arr[0] = Label[0].name
    this.setState({ pageNo: 1 })
    // 初始化
    axios
      .get(
        `${baseUrl}status=${tabKey}&username=${search}&pageNo=${pageNo}&tags=${JSON.stringify(
          arr
        )}`
      )
      .then(res => {
        console.log(res)
        this.setState({
          tabKey: tabKey,
          data: res.data.data,
          images: res.data.data.List.map(item => {
            return item.img
          })
        })
      })
      .catch(err => {
        console.log(err)
      })
  }

  getData = tabKey => {
    const { search, baseUrl, pageNo, tags } = this.state
    this.setState({ pageNo: 1 })
    axios
      .get(
        `${baseUrl}status=${tabKey}&username=${search}&pageNo=${pageNo}&tags=${tags}`
      )
      .then(res => {
        this.setState({
          tabKey: tabKey,
          data: res.data.data
        })
      })
      .catch(err => {
        console.log(err)
      })
  }
  tabChoose = e => {
    const { search, tabKey, baseUrl, pageNo, LabelKey, Label } = this.state
    this.setState({ LabelKey: [e.key], pageNo: 1 })
    Label.forEach(item => {
      if (item.checked == true) {
        item.checked = false
      }
    })
    console.log(LabelKey)
    let name = []
    name.push(e.name)
    this.setState({ tags: JSON.stringify(name) })

    axios
      .get(
        `${baseUrl}status=${tabKey}&username=${search}&pageNo=${pageNo}&tags=${JSON.stringify(
          name
        )}`
      )
      .then(res => {
        console.log(res)
        this.setState({
          data: res.data.data
        })
      })
      .catch(err => {
        console.log(err)
      })
  }
  searchInput = () => {
    const { search, tabKey, baseUrl, tags, pageNo } = this.state
    console.log(tags)
    this.setState({ pageNo: 1 })
    axios
      .get(
        `${baseUrl}status=${tabKey}&username=${search}&tags=${tags}&pageNo=${pageNo}`
      )
      .then(res => {
        console.log(res)
        this.setState({
          data: res.data.data
        })
      })
      .catch(err => {
        console.log(err)
      })
  }
  leftClick = () => {
    this.silder.prev()
  }
  nextClick = () => {
    this.silder.next()
  }
  goPage = (m, e) => {
    this.setState({
      pageNo: m,
      pageSize: e
    })

    const { search, tabKey, baseUrl, tags } = this.state
    axios
      .get(
        `${baseUrl}status=${tabKey}&username=${search}&tags=${tags}&pageNo=${m}&pageSize=${e}`
      )
      .then(res => {
        this.setState({
          data: res.data.data
        })
      })
      .catch(err => {
        console.log(err)
      })
  }
  changeInput = e => {
    console.log(e.target.value)
    this.setState({
      search: e.target.value
    })
  }
  tabChange = (e, index) => {
    console.log(e)
    const { Label } = this.state
    let newLabel = JSON.parse(JSON.stringify(Label))
    newLabel[index].checked = e.target.checked
    this.setState({
      Label: newLabel
    })
  }
  handleMoreChoose = () => {
    const { isOn } = this.state
    this.setState({ isOn: !isOn })
  }
  subitChoose = () => {
    const { Label, isOn, baseUrl, tabKey, search, pageNo } = this.state
    let arr1 = []
    let arrKey = []
    Label.forEach(item => {
      if (item.checked == true) {
        arr1.push(item.name)
        arrKey.push(item.key)
      }
    })
    this.setState({ tags: JSON.stringify(arr1) })
    this.setState({ LabelKey: arrKey })

    axios
      .get(
        `${baseUrl}status=${tabKey}&username=${search}&pageNo=${pageNo}&tags=${JSON.stringify(
          arr1
        )}`
      )
      .then(res => {
        this.setState({
          data: res.data.data,
          pageNo: Number(res.data.data.pageNo),
          images: res.data.data.List.map(item => {
            return item.img
          }),
          isOn: !isOn
        })
      })
      .catch(err => {
        console.log(err)
      })
  }
  canelChoose = () => {
    const { Label, isOn } = this.state

    this.setState({
      isOn: !isOn,
      Label: Label.map(i => ({ ...i, checked: false }))
    })
  }

  render () {
    const {
      tabs,
      tabKey,
      Label,
      LabelKey,
      data,
      pageNo,
      contentStyle,
      images,
      isOn
    } = this.state

    return (
      <div className='demo'>
        <div className='title-outer'>
          <div className='title-core'>
            <div className='title-head'>讲师简介</div>
            <div className='title-middle'>COMPANY PROFILE</div>
            <div className='title-introductory'>
              他将货物的一小部分分销给了华南海鲜市场内的另一家商户。一个月后该商户的3名员工陆续出现了新冠肺炎感染症状郑老板周围13家商店的工作人员在用龙虾包装袋装了东西之后，也成为了最早一批感染者，而与他有货物交易的两个商户，恰好位于疫情核心区。
              那么武汉新冠疫情暴发和美国进口冰鲜大龙虾到底有什么关系2020年以来
            </div>
          </div>
        </div>
        {/* tab */}
        <div className='tab-list'>
          <div className='tab-head'>
            {tabs.map(item => (
              <div
                className={tabKey === item.key ? 'tab-active' : ''}
                onClick={() => {
                  this.getData(item.key)
                }}
                key={item.key}
              >
                {item.title}
              </div>
            ))}
          </div>
        </div>
        {/*title */}
        <div className='next-title'>
          <div className='title-frist'>特聘讲师</div>
          <div className='title-last'>CERTIFIED LECTURER</div>
        </div>
        {/* input*/}
        <div className='input-outer'>
          <div className='input-core'>
            <div className='input-left'>
              <div className='input-text'>全部 &gt; </div>
              <div className='input-right'>
                <input type='input' onKeyUp={this.changeInput} />
                <div onClick={this.searchInput}>
                  <i>
                    <SearchOutlined />
                  </i>
                </div>
              </div>
            </div>
            <div className='right-text'>
              共 <span className='span'>200</span> 讲师同步在线
            </div>
          </div>
        </div>
        {/* tab */}
        <div className='middle-tab'>
          <div className='tab-item'>
            <div className='tab-left'>
              {Label.map(item => {
                return (
                  <div
                    onClick={() => {
                      this.tabChoose(item)
                    }}
                    key={item.key}
                    className={
                      LabelKey.includes(item.key) ? 'tabs-active tabs' : 'tabs'
                    }
                  >
                    {item.name}
                  </div>
                )
              })}
            </div>
            <div className='middle-right'>
              <div
                className='more-choose'
                onClick={() => this.handleMoreChoose()}
              >
                +多选
              </div>

              <div className='more-select'>
                更多 <DownOutlined />
              </div>
            </div>
          </div>
        </div>
        {/* 多选 */}

        {isOn && (
          <div className='morechoose-content'>
            <div className='isshow-morechoose'>
              <div className='morechoose-left'>
                <div className='morechoose-allitem'>
                  {Label.map((item, index) => {
                    return (
                      <div key={item.key}>
                        <Checkbox
                          checked={item.checked}
                          onChange={item => {
                            this.tabChange(item, index)
                          }}
                        >
                          {item.name}
                        </Checkbox>
                      </div>
                    )
                  })}
                </div>
                <div className='morechoose-right'>
                  <div
                    className='morechoose-on'
                    onClick={() => this.handleMoreChoose()}
                  >
                    收起
                  </div>
                  <UpOutlined />
                </div>
              </div>
              <div className='morechoose-bottom'>
                <div className='morechoose-submit' onClick={this.subitChoose}>
                  提交
                </div>
                <div className='morechoose-cancel' onClick={this.canelChoose}>
                  取消
                </div>
              </div>
            </div>
          </div>
        )}

        {/* 信息 */}
        <div className='message-content'>
          <div className='message'>
            {data?.List?.map(item => {
              return (
                <div key={item.id} className='message-item'>
                  <div className='message-left'>
                    <img src={item.img}></img>
                  </div>
                  <div className='message-right'>
                    <div className='message-title'>{item.username}</div>
                    <div className='message-professional'>{item.position}</div>
                    <div className='message-introduce'>{item.introduce}</div>
                    <div className='message-tabs'>
                      {item.tags?.map(tagItem => {
                        return (
                          <div key={tagItem} className='message-li'>
                            {tagItem}
                          </div>
                        )
                      })}
                    </div>
                  </div>
                </div>
              )
            })}
          </div>
        </div>
        {/* 分页 */}
        <div className='paginationcontent'>
          <div className='paginationa'>
            <ConfigProvider locale={zh_CN}>
              <Pagination
                showSizeChanger
                showQuickJumper
                defaultPageSize={data.pageSize}
                current={pageNo}
                defaultCurrent={pageNo}
                total={data.totalRecord}
                onChange={this.goPage}
              />
            </ConfigProvider>
          </div>
        </div>
        {/* 轮播图 */}

        <div>
          <div>
            <div className='footer-list'>
              <div className='footer-title'>讲师风采</div>
              <div className='footer-text'>LECTURER DEMEANOR</div>
            </div>
          </div>
          <div className='carousel-every'>
            <i className='font1' onClick={this.leftClick}>
              <LeftCircleOutlined />
            </i>
            <div className='carousel-rol'>
              <Carousel
                autoplay
                ref={e => {
                  this.silder = e
                }}
              >
                {images.map((Item, index) => {
                  return (
                    <div key={index}>
                      <img
                        className='img-style'
                        style={contentStyle}
                        src={Item}
                      ></img>
                    </div>
                  )
                })}
              </Carousel>
            </div>
            <i className='font2' onClick={this.nextClick}>
              <RightCircleOutlined />
            </i>
          </div>
        </div>
      </div>
    )
  }
}
